<template>
  <div class="settings-container">
    <n-tabs type="line" animated>
      <!-- 基本信息 -->
      <n-tab-pane name="basic" tab="基本信息">
        <n-card title="个人基本信息" class="settings-card">
          <n-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-placement="left"
            label-width="80"
            require-mark-placement="right-hanging"
          >
            <n-form-item label="头像" path="avatar">
              <div class="avatar-upload">
                <n-avatar
                  round
                  size="large"
                  :src="basicForm.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'"
                />
                <n-button class="upload-btn" @click="handleUploadAvatar">更换头像</n-button>
              </div>
            </n-form-item>
            <n-form-item label="用户名" path="username">
              <n-input v-model:value="basicForm.username" placeholder="请输入用户名" />
            </n-form-item>
            <n-form-item label="昵称" path="nickname">
              <n-input v-model:value="basicForm.nickname" placeholder="请输入昵称" />
            </n-form-item>
            <n-form-item label="邮箱" path="email">
              <n-input v-model:value="basicForm.email" placeholder="请输入邮箱" />
            </n-form-item>
            <n-form-item label="手机号" path="phone">
              <n-input v-model:value="basicForm.phone" placeholder="请输入手机号" />
            </n-form-item>
            <n-row justify="end">
              <n-button type="primary" @click="handleSaveBasic">保存</n-button>
            </n-row>
          </n-form>
        </n-card>
      </n-tab-pane>

      <!-- 密码修改 -->
      <n-tab-pane name="password" tab="密码修改">
        <n-card title="修改密码" class="settings-card">
          <n-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-placement="left"
            label-width="80"
            require-mark-placement="right-hanging"
          >
            <n-form-item label="原密码" path="oldPassword">
              <n-input
                v-model:value="passwordForm.oldPassword"
                type="password"
                placeholder="请输入原密码"
                show-password-on="click"
              />
            </n-form-item>
            <n-form-item label="新密码" path="newPassword">
              <n-input
                v-model:value="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                show-password-on="click"
              />
            </n-form-item>
            <n-form-item label="确认密码" path="confirmPassword">
              <n-input
                v-model:value="passwordForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
                show-password-on="click"
              />
            </n-form-item>
            <n-row justify="end">
              <n-button type="primary" @click="handleChangePassword">确认修改</n-button>
            </n-row>
          </n-form>
        </n-card>
      </n-tab-pane>

      <!-- 界面设置 -->
      <n-tab-pane name="interface" tab="界面设置">
        <n-card title="界面偏好设置" class="settings-card">
          <n-form
            ref="interfaceFormRef"
            :model="interfaceForm"
            label-placement="left"
            label-width="100"
          >
            <n-form-item label="主题模式" path="theme">
              <n-radio-group v-model:value="interfaceForm.theme">
                <n-space>
                  <n-radio value="light">
                    浅色模式
                    <template #radio>
                      <n-icon><SunnyOutline /></n-icon>
                    </template>
                  </n-radio>
                  <n-radio value="dark">
                    深色模式
                    <template #radio>
                      <n-icon><MoonOutline /></n-icon>
                    </template>
                  </n-radio>
                  <n-radio value="system">
                    跟随系统
                    <template #radio>
                      <n-icon><DesktopOutline /></n-icon>
                    </template>
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="主色调" path="primaryColor">
              <n-color-picker v-model:value="interfaceForm.primaryColor" />
            </n-form-item>
            <n-form-item label="紧凑模式" path="compact">
              <n-switch v-model:value="interfaceForm.compact" />
            </n-form-item>
            <n-row justify="end">
              <n-button type="primary" @click="handleSaveInterface">应用设置</n-button>
            </n-row>
          </n-form>
        </n-card>
      </n-tab-pane>

      <!-- 通知设置 -->
      <n-tab-pane name="notification" tab="通知设置">
        <n-card title="通知偏好设置" class="settings-card">
          <n-form
            ref="notificationFormRef"
            :model="notificationForm"
            label-placement="left"
            label-width="120"
          >
            <n-form-item label="系统通知" path="systemNotify">
              <n-switch v-model:value="notificationForm.systemNotify" />
            </n-form-item>
            <n-form-item label="邮件通知" path="emailNotify">
              <n-switch v-model:value="notificationForm.emailNotify" />
            </n-form-item>
            <n-form-item label="短信通知" path="smsNotify">
              <n-switch v-model:value="notificationForm.smsNotify" />
            </n-form-item>
            <n-form-item label="登录安全通知" path="securityNotify">
              <n-switch v-model:value="notificationForm.securityNotify" />
            </n-form-item>
            <n-row justify="end">
              <n-button type="primary" @click="handleSaveNotification">保存</n-button>
            </n-row>
          </n-form>
        </n-card>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useSettingsStore } from '../stores/settings';
import { 
  NTabs, 
  NTabPane, 
  NCard, 
  NForm, 
  NFormItem, 
  NInput, 
  NButton, 
  NAvatar,
  NRow,
  NRadioGroup,
  NRadio,
  NSpace,
  NIcon,
  NSwitch,
  NColorPicker,
  useMessage
} from 'naive-ui';
import { 
  SunnyOutline, 
  MoonOutline, 
  DesktopOutline 
} from '@vicons/ionicons5';

const message = useMessage();
const settingsStore = useSettingsStore();

// 基本信息表单
const basicFormRef = ref(null);
const basicForm = reactive({
  username: 'admin',
  nickname: '管理员',
  email: 'admin@example.com',
  phone: '13800138000',
  avatar: ''
});
const basicRules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱',
    trigger: 'blur',
    validator(rule, value) {
      const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!value || emailReg.test(value)) return true;
      return false;
    }
  },
  phone: {
    validator(rule, value) {
      if (!value) return true;
      const phoneReg = /^1[3-9]\d{9}$/;
      if (phoneReg.test(value)) return true;
      return false;
    },
    message: '请输入正确的手机号码',
    trigger: 'blur'
  }
};

// 密码修改表单
const passwordFormRef = ref(null);
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const passwordRules = {
  oldPassword: {
    required: true,
    message: '请输入原密码',
    trigger: 'blur'
  },
  newPassword: {
    required: true,
    message: '请输入新密码',
    trigger: 'blur',
    validator(rule, value) {
      if (!value) return false;
      if (value.length < 6) {
        return new Error('密码长度不能少于6位');
      }
      return true;
    }
  },
  confirmPassword: {
    required: true,
    message: '请再次输入新密码',
    trigger: 'blur',
    validator(rule, value) {
      if (!value) return false;
      if (value !== passwordForm.newPassword) {
        return new Error('两次输入的密码不一致');
      }
      return true;
    }
  }
};

// 界面设置表单
const interfaceFormRef = ref(null);
const interfaceForm = reactive({
  theme: settingsStore.settings.theme,
  primaryColor: settingsStore.settings.primaryColor,
  compact: settingsStore.settings.compact
});

// 通知设置表单
const notificationFormRef = ref(null);
const notificationForm = reactive({
  systemNotify: settingsStore.settings.systemNotify,
  emailNotify: settingsStore.settings.emailNotify,
  smsNotify: settingsStore.settings.smsNotify,
  securityNotify: settingsStore.settings.securityNotify
});

// 上传头像
const handleUploadAvatar = () => {
  message.info('头像上传功能暂未实现');
};

// 保存基本信息
const handleSaveBasic = (e) => {
  e.preventDefault();
  basicFormRef.value?.validate((errors) => {
    if (!errors) {
      message.success('基本信息保存成功');
    } else {
      message.error('请填写完整信息');
    }
  });
};

// 修改密码
const handleChangePassword = (e) => {
  e.preventDefault();
  passwordFormRef.value?.validate((errors) => {
    if (!errors) {
      message.success('密码修改成功');
      passwordForm.oldPassword = '';
      passwordForm.newPassword = '';
      passwordForm.confirmPassword = '';
    }
  });
};

// 保存界面设置
const handleSaveInterface = () => {
  settingsStore.updateSettings({
    theme: interfaceForm.theme,
    primaryColor: interfaceForm.primaryColor,
    compact: interfaceForm.compact
  });
  message.success('界面设置已保存并应用');
};

// 保存通知设置
const handleSaveNotification = () => {
  settingsStore.updateSettings({
    systemNotify: notificationForm.systemNotify,
    emailNotify: notificationForm.emailNotify,
    smsNotify: notificationForm.smsNotify,
    securityNotify: notificationForm.securityNotify
  });
  message.success('通知设置已保存');
};

// 加载设置
onMounted(() => {
  // 从store同步设置到表单
  interfaceForm.theme = settingsStore.settings.theme;
  interfaceForm.primaryColor = settingsStore.settings.primaryColor;
  interfaceForm.compact = settingsStore.settings.compact;
  
  notificationForm.systemNotify = settingsStore.settings.systemNotify;
  notificationForm.emailNotify = settingsStore.settings.emailNotify;
  notificationForm.smsNotify = settingsStore.settings.smsNotify;
  notificationForm.securityNotify = settingsStore.settings.securityNotify;
});
</script>

<style scoped>
.settings-container {
  padding: 8px;
}

.settings-card {
  margin-top: 16px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
}

.upload-btn {
  height: 32px;
}
</style> 